<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户列表</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<link rel="shortcut icon" href="favicon.ico">
<link href="hmp/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="hmp/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="hmp/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="hmp/css/animate.css" rel="stylesheet">
<link href="hmp/css/style.css?v=4.1.0" rel="stylesheet">
<link href="hmp/layui/layui/css/layui.css" rel="stylesheet">
<style>
#addShowDlg {
	display: none;
	margin: auto;
	position: absolute;
	left: 30%;
	top: 20%;
	margin-left: -50px;
	margin-top: -50px;
}
</style>
</head>
<body class="gray-bg">
	<!--第一层  数据展示 -->
	<div class="wrapper wrapper-content animated fadeInRight">
		<!-- Panel Other -->
		<div class="ibox float-e-margins">
			<div class="ibox-content">
				<div class="row row-lg">
					<!-- Example Events -->
					<div class="example-wrap">
						<div class="example">
							<!--查询条件-->
							<form role="form" id="searchForm" class="form-inline">
								<div class="form-group">
									<label for="sname">用户名:</label> <input type="text"
										class="form-control" id="sname" name="sname"
										placeholder="请输入名称">
								</div>
								<div class="form-group">
									<label for="sphone">电话:</label> <input type="text"
										class="form-control" id="sphone" name="sphone"
										placeholder="请输入电话">
								</div>
								&nbsp;&nbsp;
								<div class="form-group">
									<button type="button" id="searchBtn" class="btn btn-success">开始搜索</button>
									<button type="button" id="delectBtn" class="btn btn-primary">重
										置</button>
								</div>

								<div class="btn-group hidden-xs" id="toolbar" role="group">

									<button type="button" class="btn btn-outline btn-default"
										id="addUserForm">
										<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
									</button>
									<button type="button" class="btn btn-outline btn-default"">
										<i class="glyphicon glyphicon-trash" aria-hidden="true"
											id="deletes"></i>
									</button>
								</div>
							</form>
							<table id="userListTable" data-mobile-responsive="true">

							</table>
						</div>
					</div>
					<!-- End Example Events -->
				</div>
			</div>
		</div>
	</div>
	<!-- 底层  占个坑  -->
	<div></div>
	<!-- 用户添加弹窗  -->
	<div id="addShowDlg">
		<div id="chb-center">
			<!-- 使用layui的表单 -->
			<form class="layui-form layui-form-pane" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" name="username" id="username" required
							lay-verify="required" placeholder="请输入用户名" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码框</label>
					<div class="layui-input-inline">
						<input type="password" name="password" id="password" required
							lay-verify="required" placeholder="请输入密码" autocomplete="off"
							class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">密码不能为空</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-block">
						<input type="text" name="email" required lay-verify="required"
							placeholder="请输入邮箱" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-block">
						<input type="text" name="phone" placeholder="请输入电话"
							autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">角色分配</label>
					<div class="layui-input-block">
						<input id="deptId" name="deptId" class="hidden"> <input
							id="deptName" name="deptName" class="layui-input" type="text"    lay-verify="required"
							style="cursor: pointer;" readonly="readonly" placeholder="请分配角色">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="chb-form1">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- 修改 密码  -->
	<div class="wrapper wrapper-content animated fadeInRight" id="restPwdDlg" style="display: none;">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox-content">
					<form class="form-horizontal m-t" id="signupForm">
						<div class="form-group">
							<label class="col-sm-3 control-label">输入密码：</label>
							<div class="col-sm-8">
							<input id="userIdPwd" name="userIdPwd" class="hidden"> 
								<input id="restPassword" name="restPassword" class="form-control"
									type="password" placeholder="输入密码">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">确认密码：</label>
							<div class="col-sm-8">
								<input id="restPassword2" name="restPassword2" class="form-control"
									type="password" placeholder="确认密码">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-8 col-sm-offset-3">
								<button type="submit" class="btn btn-primary">提交</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	
</body>

<!-- 全局js -->
<script src="hmp/js/jquery.min.js"></script>
<script src="hmp/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="hmp/js/content.js?v=1.0.0"></script>
<!-- Bootstrap table -->
<script src="hmp/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="hmp/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="hmp/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="hmp/layui/layui/layui.js"></script>
<!-- jQuery Validation plugin javascript-->
<script src="hmp/js/plugins/validate/jquery.validate.min.js"></script>
<script src="hmp/js/plugins/validate/messages_zh.min.js"></script>

<!-- 表格  加载 数据  专门提取出来  方便 以后使用 -->
<script>
		$(function(){
			//调用函数，初始化表格 
		    var oTable = new TableInit();
		    oTable.Init();
		});
		
		 var TableInit = function (){
			    var oTableInit = new Object();
			    //初始化Table
			    oTableInit.Init=function()
			    {
			    	$('#userListTable').bootstrapTable({
						 url: "/user/userList",
						 method:"post",
						 dataType: "json",
						 contentType: "application/x-www-form-urlencoded",
						 pagination: true, //分页
						 paginationLoop:false,
					     paginationPreText:'上一页',
				         paginationNextText:'下一页',
				         toolbar: '#toolbar',  
				       //  showFooter:true,//显示列脚
				         showRefresh:true,//显示刷新
				         showToggle: true,
				         showColumns: true,
				         showPaginationSwitch:false,//是否显示数据条数选择框
				         sortable: true,           //是否启用排序
				         singleSelect: false,
				         //search: true,//显示搜索框
				         buttonsAlign: "right", //按钮对齐方式
				         sidePagination: "server", //服务端处理分页
				         pageNumber:1,
				         pageSize:5,
				         pageList:[5,10, 25, 50, 100],
				         undefinedText:'--',
				         uniqueId: "id", //每一行的唯一标识，一般为主键列
				         queryParamsType:'',
				         queryParams: oTableInit.queryParams,//传递参数（*）
				         columns: oTableInit.columns
					});
			    };
			    //得到查询的参数
			    oTableInit.queryParams=function(params)
			    {
			        var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			                pageSize: params.pageSize,  //页面大小
			                pageNumber: params.pageNumber, //页码
			                username: $("#sname").val(),//后台请求传的查询参数
			                phone:$("#sphone").val(),
			            };
			            return temp;
			    };
			    
			 	 //定义表格
			    oTableInit.columns=[
			
								    {
								    	    checkbox: true,
							                align: 'center',
							                valign: 'middle',
							             
								    }, 
								    {
								    	  	title: 'ID',
							                field: 'id',
							                align: 'center',
							                valign: 'middle',
							  		},  
							  	    {
								  			title: '用户姓名',
							                field: 'username',
							                align: 'center',
							                valign: 'middle',
							  		},
							  	    {
								  			title: '电话',
							                field: 'phone',
							                align: 'center',
							                valign: 'middle',
						  			},
						  		    {
								  			title: '邮箱',
							                field: 'email',
							                align: 'center',
							                valign: 'middle',
						  			},
						  			 {
							  			title: '角色',
						                field: 'roles',
						                align: 'center',
						                valign: 'middle',
					  				},
						  		   {
								  			title: 'openid',
							                field: 'openid',
							                align: 'center',
							                valign: 'middle',
						  			},
						            {
							                title: '操作',
							                field: 'id',
							                align: 'center',
							                formatter:function(value,row,index){
							                	var e = '<a  class="btn btn-primary btn-sm " href="#"   title="编辑" onclick="edit('+ row.id+')"><i class="fa fa-edit "></i></a> ';
							                	var d = '<a  class="btn btn-warning btn-sm  " href="#" title="删除"  mce_href="#" onclick="remove( '+ row.id +')"><i class="fa  fa-remove"></i></a> ';
							                	var f = '<a  class="btn btn-success btn-sm  " href="#" title="修改密码"  mce_href="#" onclick="restPwd( '+ row.id +')"><i class="fa  fa-key"></i></a> ';
							                	return f + e + d ; 
							                }
						            }
							 ];
			    
			    //返回这个对象 
			    return oTableInit;
		 }
		
		 //查询 带分页查询 
		 $("#searchBtn").click(function() {
			 $("#userListTable").bootstrapTable('refresh');
         });
		 
			//清空搜索条件 
		$("#delectBtn").click(function(){
				  $("#sname").val("");
				  $("#sphone").val("");
				  $("#userListTable").bootstrapTable('refresh');
		});
	</script>

<script type="text/javascript">
	  		 
			$(function(){
				validateRule();
			});
	
			//全局layui 定义  
			layui.use(['form','layer'], function(){
				  var   form = layui.form,
				  		layer=layui.layer;
				  
				  //打开 新的窗体 
				  $("#addUserForm").click(function(){
					  layer.open({
						  	type: 1,
						  	title: ['用户添加', 'font-size:18px;'],
	                        shadeClose: true,
	                        area: ['800px', '500px'],
	                        offset: ['50px', '230px'],
	                        content: $("#addShowDlg")
						});
				  })
				  
				  //from  监听提交    这里会表单重复提交的问题  后续处理 
				  form.on('submit(chb-form1)', function(data){
					//var param=JSON.stringify();  这个把json对象变为字符串  
			 		$.post("user/save",data.field,function(result){
			 			if(result.code==200)
			 			{
			 				layer.msg(result.msg, {icon: 1});
			 				setTimeout(function(){
			 					 $("#userListTable").bootstrapTable('refresh');
			 					 layer.closeAll('page');//关闭所有页面层
			 					// window.location.reload();刷新整个页面 
			 				}, 1000);
			 				
			 			}else
			 			{
			 				layer.alert("添加失败，请联系管理员", {icon: 2});
			 			}
			 			
			 		});
			 		return false;
				  });
				 
				  //打开 新的窗体   一个空格算一个 class  #只能是唯一的   失败了 不能用这种方法 
					//$(".edit").on("click",function(){
						
					//	var $this = $(this);//这个百度  知识点 
					//	var id = $this.data("id");
						//alert(id);
					//});
				 
					//$(".del").click(function(){
						
				//	});
				  
				  //批量删除
				  $("#deletes").click(function(){
					  //获取所有选中的值  数组       a[0].id 获取 放入新的数组里面去 
					  var strRoleIds=[];
					  var users= $("#userListTable").bootstrapTable('getSelections');  
					  if(users.length<=0)
					  {
							layer.alert("请选择一条数据", {icon: 2});
							return;
					  }else
					  {	
						  layer.confirm('请谨慎删除用户信息！', {
							 btn : ['确定','取消'],
							 function(index, layero){
	
										for(var i=0;i<users.length;i++)
										{
											strRoleIds.push(users[i].id);
										}
										//数组用，隔开
										var userIds=strRoleIds.join(",");
										var usersList=JSON.stringify(users);  //把数组变为字符串 
										var data={userIds:userIds,usersList:usersList};
										//传递给后台  这里我们传id 和所有选中的数据  usersList只为 练习 
										$.post("/user/delects",data,function(result){
											
											if(result.code==200)
											{
												layer.msg(result.msg, {icon: 1});
								 				setTimeout(function(){
								 					 $("#userListTable").bootstrapTable('refresh');
								 				}, 1000);		
											}else
											{
												layer.alert("添加失败，请联系管理员", {icon: 2});
											}
											
										});
						    	 
								  },function() {}
						    	
							});
					 
						//else 结束 
					  }
					  
				  });
				  
				  
				  <!--*****用户授权框  iframe ********-->
					$("#deptName").click(function(){
						layer.open({
							type : 2,
							title : '角色授权',
							maxmin : true,
							shadeClose : false, // 点击遮罩关闭层
							area : [ '300px', '450px' ],
							content : "role/treeView"
						});
					});
					
				  
			 });
			
			
			
		 
			//给角色 赋值 用的 
			function loadDept( deptId,deptName){
				$("#deptId").val(deptId);
				$("#deptName").val(deptName);
			}
			
			function refreshUserListTable(){
				  $("#userListTable").bootstrapTable('refresh');
			}
			
			//修改  
			function edit(id)
			{
				layui.use('layer',function(){
					 layer.open({
						  	type: 2,
						  	title: ['用户修改', 'font-size:18px;'],
	                        shadeClose: true,
	                        area: ['800px', '500px'],
	                        offset: ['50px', '230px'],
	                        content :"user/edit/"+id  
						});	
					});
			}
			
			//修改密码 
			function restPwd(id)
			{
				$("#userIdPwd").val(id);
				layui.use('layer',function(){
					 layer.open({
					  	 type: 1,
					  	 title: ['修改密码', 'font-size:18px;'],
	                     shadeClose: true,
	                     area: ['800px', '500px'],
	                     offset: ['50px', '230px'],
	                     content: $("#restPwdDlg"),
	                     cancel: function(index, layero){ 
	                    	 	cleanPwdDlg();
	                    	}    
					});
				});
			}
			
			//表单验证 
			$.validator.setDefaults({
				
		        highlight: function (element) {
	                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
	            },
	            success: function (element) {
	                element.closest('.form-group').removeClass('has-error').addClass('has-success');
	            },
	            errorElement: "span",
	            errorPlacement: function (error, element) {
	                if (element.is(":radio") || element.is(":checkbox")) {
	                    error.appendTo(element.parent().parent().parent());
	                } else {
	                    error.appendTo(element.parent());
	                }
	            },
	            errorClass: "help-block m-b-none",
	            validClass: "help-block m-b-none",
				
	            //提交方法 
				submitHandler : function() {
						update();
					}
	            
				});
			
			function update() {
				
				$.ajax({
					type : "post",
					url : "/user/updatePwd",
					data : $('#signupForm').serialize(),// 你的formid
					dataType: "json",
					error : function(request) {
						parent.layer.msg("系统错误，联系管理员");
					},
					success : function(data) {
							
						if(data.code==200)
						{
							layer.msg(data.msg, {icon: 1});
							layer.closeAll('page');
						}else
						{
							layer.alert(data.msg, {icon: 2});
						}
					}
				});
			}
		
			//清空密码框 
			function cleanPwdDlg()
			{
				$("#restPassword").val('');
				$("#restPassword2").val('');
			}
			
			function validateRule() {
				var icon = "<i class='fa fa-times-circle'></i> ";
				$("#signupForm").validate({
					rules : {
						restPassword: {
							required : true,
							minlength : 3
						},
						restPassword2 : {
	                        required: true,
	                        minlength: 3,
	                        equalTo: "#restPassword"
	                    },
					},
					messages : {
						restPassword : {
							required : icon + "请输入您的密码",
							minlength : icon + "密码必须3个字符以上"
						},
						restPassword2:{
							required : icon + "请输入您的密码",
							minlength : icon + "密码必须3个字符以上",
							equalTo: icon + "两次输入的密码不一致"
						}
					}
				})
			}
			
			
			//删除
			function remove(id)
			{
				
				layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
					 
					$.ajax({
						 type : "get",
						 url : "/user/remove/"+id,
						 error : function(request) {
								parent.layer.msg("系统错误，联系管理员");
						 },
						 success : function(data) {
									
								if(data.code==200)
								{
									refreshUserListTable();
									layer.alert(data.msg, {icon: 1});
									layer.close(index);
								}else
								{
									layer.alert(data.msg, {icon: 2});
								}
							}
					 });
					
				
					});
				
			}
	</script>
</html>
